<template>
    <el-row id="article_table">
        <el-col :span="24">
            <el-table :data="tableDatas" border style="width: 100%" v-loading="loading">
               
                <el-table-column prop="title" label="标题" width="180">
                </el-table-column>
                <el-table-column prop="add_time" label="创建时间" :formatter="col_time">
                </el-table-column>
                <el-table-column prop="show_time" label="展示时间" :formatter="col_time">
                </el-table-column>
                <el-table-column prop="is_show" label="是否展示">
                </el-table-column>
                <el-table-column prop="is_top" label="置顶">
                </el-table-column>
                <el-table-column prop="click" label="点击量">
                </el-table-column>
                <el-table-column prop="description" label="描述" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handle_edit(scope.row)" type="info" size="mini">编辑</el-button>
                        <el-button @click="handle_delete(scope.row)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="24">
            <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="total" 
                @current-change="handle_page" 
                >
            </el-pagination>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "articleTable",
        props: ['tableData'],
        data() {
            return {
                // 表格数据
                tableDatas: [],
                // 总条数
                total:0,
                // 接口查询参数
                request_data:{
                    page:1,
                    size:10
                },
                // 表格loading
                loading:true,
            }
        },
        methods: {
            // 获取表格数据
            get_data() {
                this.$as.article.list(this.request_data).then(res => {
                    this.tableDatas = res.data.data
                    this.total = res.data.total
                    console.log('tabledata',this.tableDatas[0].id);
                })
            },
            // 编辑按钮
            handle_edit(d){console.log('edit',d);},
            // 删除按钮
            handle_delete(d){
                this.loading = true;
                this.$as.article.delete({id:d.id}).then((res)=>{
                    this.get_data();
                    this.$message({message:res.data,type:res.msg});
                    this.loading = false;
                    console.log(res)
                })
            },
            // 分页
            handle_page(d){
                this.request_data.page = d;
                this.get_data();
            },
            col_time(row,col,cell,index){
                var d = row.add_time;
                return this.$util.toDateString('datetime',d)
            }

        },
        created: function() {
            this.loading = true;
            this.$as.article.list({page:1,size:10}).then(res => {
                this.loading = false
                this.tableDatas = res.data.data;
                this.total = res.data.total
            })
        }

    }
</script>

<style>

</style>